<template>
	<view class="exchangeInteractive">
		<view class="top">
			<text>当前可用中茶积分</text>
			<text>{{nowList.nowVal}}</text>
			<text> = ￥ {{nowList.teaValue}}</text>
		</view>
		<view class="content">
			<view class="line" v-for="(item,index) in pageResult.list" :key="index">
				<view class="item">
					<view class="left">
						<view class="left_txt">
							<text>{{item.value}}</text>
							<text>元</text>
							<text>互动券</text>
						</view>
						<view class="left_txt1">每月发放{{item.batch_val}}元，分{{item.batch_num}}个月发放</view>
					</view>
					<view class="right">
						<text>需扣中茶价值：{{item.expend_val}}</text>
						<text :class="'btn ' + (item.is_exchange == 1 ? 'normal' : 'not_enough')" @click="getReceiver(index)">{{item.exchangeName}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content" v-if="exchangeInfo.is_exchange == 1">
			<view class="line_">
				<view class="line-title">
					<view class="line-t"> 兑换记录 </view> 
					<!-- <view v-if="false" class="line-p">
						<view class=""> 查看详情 </view> 
						<image class="line-p-img" src="../../static/img/more_blue.png" mode=""></image> 
					</view> -->
				</view>
				<view class="line-p"> 待发放：<text>{{exchangeInfo.wait_val}}</text> </view>
				<view class="line-p"> 已发放：<text>{{exchangeInfo.send_val}}</text> </view>
				<view v-show="exchangeInfo.wait_val > 0" class="line-p"> 下次发放时间：{{exchangeInfo.next_date}} </view>
				<view v-show="exchangeInfo.next_val > 0" class="line-p"> 下次发放数量：{{exchangeInfo.next_val}} </view>
			</view>
		</view>
		
		
		
	    <view class="info" :style="'padding-bottom: '+ bottomHeight +'rpx'">
			{{remark}}	                            
		</view>
		
		<chartsPopup ref="popup"></chartsPopup>
		
		<view class="flex-buttom" :style="'height:' +  bottomHeight + 'rpx;'">
			<button @click="jumpTest()"> 查看中茶趋势图 </button>
		</view>
		
		
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import chartsPopup from '../../components/chartsPopup/chartsPopup.vue';
	export default {
		components: {
			chartsPopup
		},
		data() {
			return {
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
				nowList: {nowVal : 0, teaValue : 0},
                remark : '',
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					type : 1,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
				exchangeInfo: {},
			} 
		},
		methods: {
			jumpTest(){
				// common.jump('tea_index');
				this.$refs.popup.open();
			},
			jump(){
				common.jump('exchange_interactive_disc');
			},
			
			getList(){
				var self = this;
				self.pageParam.page++
				serve
					.request({
						url: '/common/exchange/index',
						data: self.pageParam
					})
					.then(res => {
						// console.log(res.data); 
						if (res.data && res.data.list.length > 0) {
							self.pageResult.list=self.pageResult.list.concat(res.data.list);
						}
						self.nowList = res.data.nowList;
                        self.remark = res.data.remark;
						self.pageResult.isEmpty = self.pageResult.list.length == 0;
						self.pageResult.isEnd = res.data.length == 0; 
					});
			},
			getInfo() {
				serve.request({
					url: '/common/exchange/info',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					}
				}).then(res => {
					this.exchangeInfo = res.data;
				});
			},
			getReceiver(index) { 
				var self = this;
				let item = self.pageResult.list[index];
				if(item.is_exchange == 0) {
                    uni.showModal({
                        title: '提示',
                        content: "只有VIP会员和元老会员可以兑换，去升级",
                    	showCancel: false,
                    	success:function(){
                            common.jump('upgrade');
                    	}
                    });
					return ;
				}
                if(item.is_exchange == 2) {
                    return ;
                }
				uni.showModal({
				    title: '提示',
				    content: '确定扣除'+ item.expend_val +'中茶积分兑换互动券？',
				    success: function (res) {
				        if (res.confirm) {
							serve.request({
								url: '/common/exchange/receiver',
								data: {
									appkey: uni.getStorageSync('appkey'),
									'access-token': uni.getStorageSync('access-token'),
									id: item.id
								}
							}).then(res => {
								uni.showToast({
									title:res.message,
								});
								self.getList();
								self.getInfo();
							});
						}
				    }
				});
			}
		},
		onShow() {
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				this.bottomHeight = 150;
			}
			this.getList();
			if(uni.getStorageSync('access-token') != '') {
				this.getInfo();
			}
		},
		onPullDownRefresh() {
			this.getList();
		}
	}
</script>

<style scoped lang="scss">
	.exchangeInteractive{
		.top{
			padding: 55rpx 30rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			border-bottom: 1rpx rgba(225,224,225,0.6) solid;
			text:nth-child(1){
				color: #666666;
			}
			text:nth-child(2){
				color: #111111;
				margin-left: 47rpx;
			}
		}
		.content{
			box-sizing: border-box;
			padding: 0rpx 13rpx 32rpx;
			border-bottom: 16rpx #F9F9FB solid;
			.line{
				box-sizing: border-box;
				margin-top: 23rpx;
				padding: 48rpx 0rpx;
				width:100%;
				background:#FFF9F9;
				border:1rpx solid rgba(236,97,66,1);
				border-radius:10rpx;
				.item{
					display: flex;
					align-items: center;
					.left{
						width: 50%;
						border-right: 1rpx rgba(235,89,56,0.37) solid;
						display: flex;
						flex-direction: column;
						align-items: center;
						.left_txt{
							color: #EB5938;
							text:nth-child(1){
								font-size: 40rpx;
							}
							text:nth-child(2){
								font-size: 20rpx;
							}
							text:nth-child(3){
								font-size: 28rpx;
								margin-left: 10rpx;
							}
						}
						.left_txt1{
							font-size: 20rpx;
							color: #A0A0A0;
							margin-top: 34rpx;
						}
					}
					.right{
						width: 50%;
						display: flex;
						    flex-direction: column;
						    justify-content: space-around;
						    align-items: center;
						text:nth-child(1){
							font-size: 28rpx;
							    color: #333333;
						}
						text:nth-child(2){
							width: 180rpx;
							    height: 48rpx;
							    line-height: 48rpx;
							    text-align: center;
							    border-radius: 24rpx;
							    color: #FFFFFF;
							    font-size: 24rpx;
							    margin-top: 20rpx;
						}
						.normal {
							background:rgba(235,89,56,1);
						}
						.not_enough{
							background:rgba(179, 179, 179, 1)
						}
					}
				}
			}
			.line_{
				box-sizing: border-box;
				margin-top: 23rpx;
				padding: 16rpx 0rpx;
				width:100%;
				background:#FFF9F9;
				// border:1rpx solid rgba(236,97,66,1);
				border-radius:10rpx;
				.line-title{
					padding: 0 20rpx;
					font-size: 32rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: space-between;
					.line-t{}
					.line-p{
						color: #219afc;
						display: flex;
						align-items: center;
						.line-p-img{
							width: 34rpx;
							height: 34rpx;
							margin-left: 8rpx;
						}
					}
				}
				.line-p{
					font-size: 28rpx;
					padding-left: 60rpx;
					line-height: 50rpx;
					text{
						color: #EB5938;
					}
				}
			}
		}
		.info{
			box-sizing: border-box;
			padding: 48rpx 35rpx 107rpx;
			margin-bottom: 40rpx;
			font-size: 24rpx;
			color: #999999;
			white-space: pre-line;
			line-height:36rpx;
		}
		.flex-buttom{
			position: fixed;
			bottom: 0rpx;
			width: 100vw;
			height: 110rpx;
			background-color: #FFFFFF;
			z-index: 1;
			button{
				    width: 640rpx;
					height: 88rpx;
					border-radius: 44rpx;
				    font-size: 32rpx;
				    color: #ffffff;
				    background: #EB5938;
				    margin-top: 10rpx;
			}
		}
	}
</style>
